<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    ringData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      const radius = [50, 75]
      const colors = ['#0a8cff', '#bb4dff', '#42e7e3']

      this.chart.setOption(
        {
          legend: {
            top: 'middle',
            right: '5%',
            orient: 'vertical',
            textStyle: {
              color: '#94e5ff',
              fontSize: 14
            },
            formatter: function(a, b, c) {
              const result = a
              // result += myMap[a] + dw
              return result
            }
          },
          /* legend: {
            icon: '',
            data: [
              this.ringData.name
            ],
            textStyle: {
              color: 'white'
            },
            show: true
          }*/
          title: {
            subtext: this.ringData.name,
            x: 'center',
            subtextStyle: {
              color: '#94e5ff',
              textAlign: 'left',
              fontSize: 16
            }

          },
          graphic: [
            { // 图形中间文字
              type: 'text',
              left: '47%',
              top: '50%',
              style: {
                text: '测试',
                textAlign: 'center',
                fill: '#fff',
                fontSize: 18
              }
            },
            {
              type: 'text',
              left: '48%',
              top: '58%',
              style: {
                text: '123',
                textAlign: 'center',
                fill: '#94e5ff',
                fontSize: 12
              }
            }
          ],
          tooltip: {
            show: true,
            trigger: 'item'
          },
          toolbox: {
            show: false,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                  funnel: {
                    width: '20%',
                    height: '30%',
                    itemStyle: {
                      normal: {
                        label: {
                          formatter: function(params) {
                            return 'other\n' + params.value + '%\n'
                          },
                          textStyle: {
                            baseline: 'middle'
                          }
                        }
                      }
                    }
                  }
                }
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          series: [
            {
              type: 'pie',
              name: '测试数据',
              center: ['50%', '55%'],
              radius: radius,
              x: '0%', // for funnel
              color: colors,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#09204c',
                borderWidth: 2,
                backgroundColor: 'rgba(7,81,112,0)'
              },
              label: {
                color: colors[0],
                show: true,
                position: 'outside', // 隐藏引导线
                formatter: function(obj) {
                  var text = obj.name
                  if (text.length > 3) {
                    text = text.slice(0, 3) + '\n' + text.slice(3)
                  }
                  return '{a|' + text + '}' + '\n' + '{b|' + obj.percent + '%}'
                },
                rich: { // 设置样式
                  a: {
                    lineHeight: 20,
                    fontSize: 12
                  },
                  b: {
                    fontSize: 12

                  }
                }
              },
              labelLine: { // 设置引导线的长度
                show: true,
                length: 5,
                length2: 10,
                smooth: true
              },
              data: this.ringData.data
            }
          ]
        }
        , true)
    }
  }
}
</script>

<style>

</style>
